<template>
  <div class="container" v-loading="loading">
    <el-button @click="dialogVisibles = true" style="margin-bottom: 10px">添加角色</el-button>
    <el-table :data="roleData">
      <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
      <el-table-column label="角色名称" align="center" prop="roleName"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="editPermissions(scope.row.id)">编辑</el-button>
          <el-button type="text" @click="deletePermissions(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页-->
    <el-pagination
        style="padding-top: 15px"
        @size-change="findSizeChange"
        @current-change="findPage"
        :current-page.sync="pageNow"
        :page-sizes="[2,4,6,8,10]"
        :page-size="size"
        layout="total, ->,sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--  编辑-->
    <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-tree
          ref="tree"
          :data="permissionAll"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="permissionData"
          :props="defaultProps">
      </el-tree>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="getCheckedNodes()">修 改</el-button>
  </span>
    </el-dialog>
<!--    添加角色-->
    <el-dialog
        title="添加角色"
        :visible.sync="dialogVisibles"
        width="30%"
        :before-close="handleCloses">
      <el-input v-model="input" placeholder="请输入角色名称"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibles = false">取 消</el-button>
    <el-button type="primary" @click="addRole">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: 'Role',
  data() {
    return {
      roleData: [],
      //每页显示的条数
      size: 4,
      //总条数
      total: 0,
      //当前页码
      pageNow: 1,
      input: "",
      loading: true,
      dialogVisible: false,
      dialogVisibles: false,
      roleId: null,
      permissionData:[],
      permissionAll:[],
      defaultProps: {
        children: 'children',
        label: 'permissionName'
      }
    }
  },
  methods: {
    getRole(page = 1, size = 4) {
      request.get("role/getRole", {
        params: {
          pageNow: page,
          pageSize: size
        }
      })
          .then(res => {
            this.roleData = res.data.data.list;
            this.total = res.data.data.total;
            this.loading = false
          })
    },
    //用来处理每页显示记录发生变化的方法
    findSizeChange(size) {
      //将val赋值给size
      this.size = size;
      //重新去后台查询数据
      this.getRole(this.pageNow, this.size)
    },
    //当前页码改变的时候
    findPage() {
      this.findAll(this.pageNow, this.size)
    },
    handleClose(done) {
            done();
    },
    handleCloses(done) {
      done();
    },
    editPermissions(id) {
      this.roleId = id
      request.get("permissions/getRolePermissions/" + id)
          .then(res => {
            this.permissionData =res.data.data
          })
      request.get("permissions/getAllPermissions")
          .then(res => {
            this.permissionAll =res.data.data
            this.dialogVisible = true
          })
    },
    deletePermissions(id){
      request.delete("role/deleteRole/" + id)
          .then(res => {
            if(res.data.code == 1) {
              this.getRole()
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
            }else {
              this.$message({
                message: res.data.msg,
                type: 'error'
              })
            }
          })
    },
    getCheckedNodes() {
      const checkedNodes = this.$refs.tree.getCheckedNodes();
      request.post('permissions/updateRolePermissions', {
        permissionData: checkedNodes,
        roleId: this.roleId
      })
          .then(res => {
            this.dialogVisible = false
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          })
    },
    addRole(){
      this.dialogVisibles = true
      request.post("role/addRole",{
        roleName: this.input
      })
          .then(res => {
            this.dialogVisibles = false
            this.getRole()
            this.$message({
              message: '添加成功',
              type: 'success'
            });
          })

    }
  },
  mounted() {
    this.getRole()
  }
}
</script>

<style scoped>
/deep/.el-dialog .el-dialog__footer {
  text-align: center
}
</style>
